<template>
    <div class="all">
        <div class="container">
            <div class="left">
                <div class="top-left">
                    <el-collapse accordion>
                        <el-collapse-item name="1">
                            <template #title>
                                练习室&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                            </template>
                            <div @click="toTraining">我的练习室</div>
                        </el-collapse-item>
                    </el-collapse>
                </div>
                <div class="bottom-left">
                    <div
                        class="border load"
                        :class="{ active: isSelect == item.name }"
                        v-for="(item, index) in arr"
                        :key="index"
                        @click="toHistory(item)"
                    >
                        {{ item.name }}
                    </div>
                </div>
            </div>

            <RouterView></RouterView>
        </div>
    </div>
</template>

<script lang="ts" setup>
import MineVue from './components/mine.vue';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
const router = useRouter();
const arr = ref([
    {
        name: '缓存',
        isSelect: false,
    },
    {
        name: '音频库',
        isSelect: false,
    },
    {
        name: '收藏',
        isSelect: false,
    },
    {
        name: '历史',
        isSelect: false,
    },
]);
const isSelect = ref('');
const toCenter = () => {
    router.push('/center/view_records');
};
const toTraining = () => {
    router.push('/training/');
};
const toHistory = (item: any) => {
    // item.name = isSelect;
    isSelect.value = item.name;
    router.push('/center/view_records');
};
</script>

<style lang="scss" scoped>
.all {
    width: 100%;
    height: 100%;
}
.container {
    margin-top: 24px;
    display: flex;
    position: relative;
}
.left {
    position: relative;
    display: block;
}
.top-left {
    background: #fff;
    border-radius: 4px;
    padding: 5px 0;
    margin-bottom: 10px;
    width: 170px;
    background-color: #fff;
    border-radius: 4px;
}

:deep(.el-collapse) {
    border: 0px;
}
:deep(.el-collapse-item__header) {
    font-size: 14px;
    color: #111;
    cursor: pointer;
    position: relative;
    display: block;
    text-decoration: none;
    height: 40px;
    margin: 0px 0px;
    border-left: 2px solid red;
    padding: 5px 21px;
}
:deep(.el-collapse-item__content) {
    color: #f93684;
    font-size: 14px;
    padding: 12px 0 12px 49px;
    cursor: pointer;
}

.bottom-left {
    display: block;
    top: 160px;
    left: 10;
    margin-top: 10px;
    background-color: #fff;
    width: 170px;
    border-radius: 4px;
}
.load {
    font-size: 14px;
    color: #111;
    padding: 17px 21px;
    cursor: pointer;
    position: relative;
    display: block;
    text-decoration: none;
}
.border:before {
    content: ' ';
    position: absolute;
    width: 4px;
    height: 37px;
    left: 0;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: background-color 0.3s ease;
    transition: background-color 0.3s ease;
}
.border:hover:before {
    background-color: red;
}
.border.active::before {
    background-color: red;
}
</style>
